<template>
	<view class="qilin-box-textDetail">
		<view class="textDetail-author">@{{item.author}}</view>
		<view class="textDetail-info">{{item.title}}</view>
		<view class="textDetail-music-info">
			<view class="music-text">火火的姑娘DJ</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["item"]
	}
</script>

<style>
	.qilin-box-textDetail{
		position:absolute;
		bottom:120rpx;
		left:0;
		padding:20rpx;
		color:#fff;
		z-index:2;
		font-size:24rpx;
		width:70%;
		overflow:hidden;
	}
	.textDetail-author{
		height:60rpx;
		line-height:60rpx;
		font-size:30rpx;
	}
	.textDetail-info{
		word-wrap:break-word;
		line-height:40rpx;
		padding:10rpx 0;
		width:100%;
	}
	.textDetail-music-info{
		height:60rpx;
		line-height:60rpx;
		overflow:hidden;
		width:50%;
	}
	.music-text{
		animation:music 4s linear 0s infinite;
	}
	
	
	
	
	
	@keyframes music{
		0%{
			transform:translate3d(80%,0,0);
		}
		100%{
			transform:translate3d(-80%,0,0);
		}
	}
</style>
